<template>
  <div class="box">
    <van-nav-bar title="账号管理" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <div class="user_info">
      <div>
        <span>昵称</span>
        <input type="text" v-model="userdata.nickName" />
      </div>
      <div>
        <span>个性签名</span>
        <input type="text" v-model="userdata.introduceSign" />
      </div>
      <div>
        <span>修改密码</span>
        <input type="text" v-model="userdata.password" />
      </div>
    </div>
    <van-button type="primary" @click="save">保存</van-button>
    <van-button type="primary" @click="loginout">退出登录</van-button>
  </div>
</template>
<script setup>
import { getuser, putuserinfo } from "@/api/index.js";
import { onMounted, reactive } from "vue";
import md5 from "js-md5";
import { showNotify } from "vant";
import {useRouter} from "vue-router"
let router=useRouter()
// 3 秒后自动关闭
let userdata = reactive({
  nickName: "", //昵称
  loginName: "", //登录名
  introduceSign: "", //个性签名
  password: "",
});

let getuserdata = () => {
  console.log(1);
  getuser().then((res) => {
    console.log(res);
    if (res.resultCode == 200) {
      userdata.nickName = res.data.nickName;
      userdata.loginName = res.data.loginName;
      userdata.introduceSign = res.data.introduceSign;
    }
  });
};

onMounted(() => {
  getuserdata();
});

//保存
let save = () => {
  putuserinfo(
    userdata.introduceSign,
    userdata.nickName,
    md5(userdata.password)
  ).then((res) => {
    if (res.resultCode == 200) {
      showNotify("修改密码成功请重新登录");
      setTimeout(()=>{
        localStorage.removeItem("mltoken");
        router.go(0)
      },1000)
      
    }
  });
};
//退出登录
let loginout = () => {
  localStorage.removeItem("mltoken");
  router.go(0)
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 auto;
}
.user_info {
  color: #323233;
  font-size: 0.37333rem;
  div {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0.26667rem 0.42667rem;
    overflow: hidden;
    color: #323233;
    font-size: 0.37333rem;
    line-height: 0.64rem;
    background-color: #fff;
    span {
      width: 2rem;
    }
    input {
      border: none;
    }
  }
}
.van-button {
  display: block;
  width: 80%;
  margin: 0.53333rem auto;
}
</style>
